<template>
<view style="width: 100%;" class="myhome" v-if="isLoing">
	<view class="topper" :style="{width:width + 'px'}">
		<view class="user_photo" style="overflow: hidden;">
			<image :src="userData.userInfo.avatarUrl" mode="scaleToFill" style="width: 100%;height: 100%;border-radius: 50%;"></image>
		</view>
		<text>{{userData.userInfo.nickName}}</text>
	</view>
	<view class="my_nav">
		<view class="my_nav_list">
			<view class="my_nav_list_num">
				8
			</view>
			<text>收藏的店铺</text>
		</view>
		<view class="my_nav_list">
				<view class="my_nav_list_num">
					28
				</view>
				<text>收藏的商品</text>
		</view>
		<view class="my_nav_list">
				<view class="my_nav_list_num">
					84
				</view>
				<text>关注的商品</text>
		</view>
		<view class="my_nav_list">
				<view class="my_nav_list_num">
					18
				</view>
				<text>足迹</text>
		</view>
	</view>
	<view class="my_order ">
		<view class="my_order_titel">
			我的订单
		</view>
		<view class="my_order_main">
			<view class="my_order_main_child">
				<view class="my_order_main_child_icon">
					<uni-icons type="icon-rukuqingdan" customPrefix="iconfont"  size="60rpx" color="#DD524D"></uni-icons>
				</view>
				<text>待付款</text>
			</view>
			<view class="my_order_main_child">
				<view class="my_order_main_child_icon">
					<uni-icons type="icon-daishouhuo" customPrefix="iconfont" size="60rpx" color="#DD524D"></uni-icons>
				</view>
				<text>待收货</text>
			</view>
			<view class="my_order_main_child">
				<view class="my_order_main_child_icon">
					<uni-icons type="icon-tuikuan" customPrefix="iconfont" size="60rpx" color="#DD524D"></uni-icons>
				</view>
				<text>退款/退货</text>
			</view>
			<view class="my_order_main_child">
				<view class="my_order_main_child_icon">
					<uni-icons type="icon-shouye" customPrefix="iconfont" size="60rpx" color="#DD524D"></uni-icons>
				</view>
				<text>全部订单</text>
			</view>
		</view>
	</view>
	<view class="my_order_list">
		<view class="my_order_list_child">
			收获地址
			<uni-icons type="right" size="30rpx"></uni-icons>
		</view>
		<view class="my_order_list_child">
			联系客服
			<uni-icons type="right" size="30rpx"></uni-icons>
		</view>
		<view class="my_order_list_child" @click="quitUser">
			退出登录
			<uni-icons type="right" size="30rpx"></uni-icons>
		</view>
	</view>
</view>
<view class="nologin" v-else="!isLoing">
	<view class="nologin_icon" v-show="isLoing">
		<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp17.qhimg.com%2Ft016b24370464783979.jpg&refer=http%3A%2F%2Fp17.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650106528&t=3a931f2ea5da378420764c1cc7d82b9f" style="width: 100%;height: 100%;"></image>
	</view>
	<button type="primary" class="btn-login" open-type="getUserInfo"  @click="getUserInfo">一键登录</button>
	<text>登录以后享受更多权益</text>
</view>
</template>

<script>
	import {mapState,mapMutations,useStore,mapGetters } from 'vuex'
	import easyReq from '../../Tools/EasyReq.js'
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		watch,
		computed,
		inject,
		onMounted,
		toRaw
		
	} from 'vue'
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	export default defineComponent({
		setup(){
			const store = useStore()
			async function getUserInfo(){
				
				uni.getUserProfile({
					desc:'正在尝试获取授权信息',
					success:async function (value) {
						let detail = {}
						detail = value
						const {code,errMsg} = await uni.login()
						if(errMsg !== "login:ok") return uni.$showMsg('登录失败')
						if (detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')
						detail.code = code
						detail.errMsg = errMsg
						// const reuslt = await easyReq(`/api/public/v1/users/wxlogin?code=${code}&encryptedData=${detail.encryptedData}&iv=${detail.iv}&rawData=${detail.rawData}&signature=${detail.signature}`)
						console.log('执行流')
						store.commit("serUserData",detail)
					},
					fail() {
						uni.showModal({
							content:'确定取消授权吗?',
							cancelText:'是的',
							confirmText:"不是",
							success(res){
								if(res.confirm){
									getUserInfo()
								}
							}
						})
					}
				})
				
			}
			function quitUser(){
				store.commit("serUserData",{})
			}
			return{
				width:uni.getSystemInfoSync().windowWidth,getUserInfo,userData:computed(()=>store.state.userData),quitUser
			}
		},
		computed:{
			...mapGetters(['isLoing'])
		}
	}) 
</script>

<style lang="scss" scoped>
.topper{
	height: 300rpx;
	background-color: #DD524D;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	.user_photo{
		width: 160rpx;
		height: 160rpx;
		background-color: white;
		padding: 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		margin-bottom: 10rpx;
		box-shadow: 0 0 10rpx #3A3A3A;
	}
	text{
		color: white;
		font-weight: 700;
	}
}
.my_nav{
	width: 96%;
	height: 100rpx;
	margin-top: 270rpx;
	background-color: white;
	display: flex;
	border-radius: 10rpx;
	.my_nav_list{
		width: 25%;
		font-size: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}
.my_order{
	width: 96%;
	height: 250rpx;
	margin: 15rpx 0;
	background-color: white;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	.my_order_titel{
		height: 100rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		font-size: 28rpx;
		border: 1px solid #dedde2;
	}
	.my_order_main{
		flex: 1;
		display: flex;
		.my_order_main_child{
			width: 25%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			margin-bottom: 10rpx;
		}
	}
}
.my_order_list{
	width: 96%;
	background-color: white;
	border-radius: 10rpx;
	.my_order_list_child{
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 20rpx;
		font-size: 28rpx;
	}
}
.myhome{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.nologin{
	width: 100%;
	height: 600rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: flex-end;
	flex-wrap: wrap;
	.nologin_icon{
		border-radius: 50%;
		overflow: hidden;
		width: 200rpx;
		height: 200rpx;
	}
}
.btn-login{
	background-color: #DD524D;
	border-radius: 60rpx;
	width: 90%;
	margin: 40rpx 0 20rpx;
}
</style>

<style>
page{
    background:#ececec;

}
</style>
